// el-table 再封装
<template>
  <div
    class="x-table"
    :style="minTableHeight ? `height: calc(100% - ${minTableHeight}px)` : null"
  >
    <el-table
      ref="xTable"
      v-bind="$attrs"
      v-on="$listeners"
      :data="tableData"
      :max-height="tableMaxHeight ? tableMaxHeight : tableHeight"
      :min-height="`200px`"
      @selection-change="selectionChange"
      :style="{ '--line': cellLineNumber }"
    >
      <!-- 多选列 -->
      <template v-if="tableConfig.selection" align="left">
        <el-table-column
          type="selection"
          :width="tableConfig.selectionWidth || 40"
          :fixed="tableConfig.selectionFixed || null"
          :reserve-selection="tableConfig.reserveSelection || false"
          :selectable="
            tableConfig.selectable ||
            function () {
              return true;
            }
          "
        ></el-table-column>
      </template>
      <!-- 序号列 -->
      <template v-if="tableConfig.index">
        <el-table-column
          type="index"
          :width="tableConfig.indexWidth || 50"
          :label="tableConfig.indexLabel || '序号'"
          :fixed="tableConfig.indexFixed || null"
          :sortable="tableConfig.sortable ? tableConfig.sortable : false"
        ></el-table-column>
      </template>
      <template v-for="item in tableColumnConfig">
        <!-- 动态插槽 -->
        <el-table-column
          v-if="item.scope && !item.noShow"
          :key="item.scope"
          :label="item.label || ''"
          :width="item.width || ''"
          :min-width="item.minWidth || ''"
          :align="item.align || 'left'"
          :header-align="item.headerAlign || 'left'"
        >
          <template slot-scope="scope">
            <slot
              :name="item.scope"
              :data="{ scope: scope.row, index: scope.$index }"
            />
          </template>
        </el-table-column>

        <!-- 循环列 -->
        <TableTemplate
          v-else-if="!item.scope && !item.noShow"
          :key="item.label"
          :table-colum-config="item"
          v-bind="$attrs"
          v-on="$listeners"
        />
      </template>
      <!-- 提供一个插槽  -->
      <slot />
    </el-table>
  </div>
</template>

<script>
import TableTemplate from "./table-template.vue";
export default {
  name: "XTable",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableConfig: {
      type: Object,
      default: () => {},
    },
    tableColumnConfig: {
      type: Array,
      require: true,
      default: () => [],
    },
    minusPart: {
      type: Number,
      default: () => 0,
    },
    minTableHeight: {
      type: Number,
      default: () => 0,
    },
    cellLineNumber: {
      type: Number,
      default: () => 2,
    },
    tableMaxHeight: {
      type: Number,
      default: () => 0,
    },
  },
  data() {
    return {
      tableHeight: 0,
    };
  },
  mounted() {
    this.getTableHeight();
    window.addEventListener("resize", this.getTableHeight);
  },
  beforeMount() {
    window.removeEventListener("resize", this.getTableHeight);
  },
  methods: {
    getTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - this.minusPart;
      });
    },

    selectionChange(val) {
      this.$emit("selectionChange", val);
    },
  },
  components: { TableTemplate },
};
</script>

<style lang="scss">
.x-table {
  .cell {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: var(--line); //显示的行
  }
  th {
    background: rgb(240, 242, 245);
  }
  .x-table-template {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    .x-table-input {
      input {
        text-align: center;
      }
    }
  }
  .el-link {
    font-size: 13px;
  }
  .is-disabled {
    color: #c0c4cc !important;
  }
}
</style>
